// 在非 Vue 组件中想要获取路由实例,Vuex实例,可以将对应的实例直接进行导入即可!!!!

// 导入路由实例
import router from '@/router'

// 导入查看本地是否有token
import { getToken, removeToken } from '@/utils/storage'

// 导入Vuex实例
import store from '@/store'
import { Message } from 'element-ui'
// 全局导航守卫(访问每个(任意)路由的时候,都会被全局导航守卫拦截住(监听到))

// 这个方法接收一个函数作为参数
// 函数中有三个形参 -> to , from , next

// to : 表示要去哪,也就是即将访问的路由,即将要进入的路由
// from : 表示从哪个路由来的,代表的是即将要离开的路由
// next : 放行的意思,只有放行了才可以进入即将访问的路由
router.beforeEach(async (to, from, next) => {
  // next 放行的意思,只有调用了这个方法,才能进入即将访问的路由
  // 第一种用法: 直接写一个next()直接放行
  // next()
  // 第二种用法: 给next()添加一个路由作为参数
  // next('/login')
  // 第三种用法: 给next()传递一个布尔值,代表是否阻止跳转.false表示中断跳转,不放行
  // next(false)
  // 第四种用法: 单纯了解
  // next(new Error())

  // 创建一个敏感路由数组(在没有登录的情况下去判断)
  // 新增三个敏感路由
  const authPath = ['/trade', '/pay', '/center', '/pay_success']
  // 先从本地取出存储的token
  const token = getToken()
  // 判断token是否有值,有值则证明登录过
  if (token) {
    // 如果有值,再判断Vuex中是否存储了用户信息
    const { id } = store.state.user.userInfo
    // 如果存储了,则证明Vuex有用户信息
    // 就可直接放行
    if (id) {
      next()
    } else {
      // 如果不存在用户信息,就需要重新获取
      try {
        // console.log('执行')
        await store.dispatch('user/getUserInfo')
        // 如果获取成功,就证明token有效,获取之后就可直接放行
        next()
      } catch (error) {
        // 获取失败,有可能就是 token 失效

        // 移除已经失效的本地token,并跳转到登录
        removeToken()

        router.push('/login')
      }
    }
    // 当走进 else 就证明token不存在
    // 就证明路由没有存在过
  } else {
    // 没有token 则没登录过
    // 准备鉴权

    // 判断在敏感路由数组中是否存在即将要进入的路由
    if (authPath.includes(to.path)) {
      next('/login')
      Message.success('请先进行登录')
    } else {
      next()
    }
  }
})

router.onError((err) => {
  console.log(err)
})
